import React from 'react';
import styled from 'styled-components';
import { Button, Space, Typography } from 'antd';
import { MinusOutlined, CloseOutlined } from '@ant-design/icons';

const { Text } = Typography;

// 扩展React的CSS属性以包含 a-webkit-app-region
declare module 'react' {
  interface CSSProperties {
    WebkitAppRegion?: 'drag' | 'no-drag';
  }
}

const FrameContainer = styled.div`
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #141414; // 深色背景
  /* border-radius: 8px; */
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
`;

const TitleBar = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  background: #1f1f1f;
  -webkit-app-region: drag; // 允许拖拽
`;

const ContentArea = styled.div`
  flex-grow: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow-y: auto;
`;

const WindowControls = styled(Space)`
  -webkit-app-region: no-drag; // 控制按钮不可拖拽
`;

interface CustomFrameProps {
  title?: string;
  children: React.ReactNode;
}

export const CustomFrame: React.FC<CustomFrameProps> = ({ title = 'App', children }) => {
  const handleMinimize = () => {
    window.electronAPI.runTask('minimizeWindow');
  };

  const handleClose = () => {
    window.electronAPI.runTask('closeWindow');
  };

  return (
    <FrameContainer>
      <TitleBar>
        <Text style={{ color: '#a6a6a6' }}>{title}</Text>
        <WindowControls>
          <Button type="text" size="small" icon={<MinusOutlined style={{ color: '#a6a6a6' }} />} onClick={handleMinimize} />
          <Button type="text" size="small" icon={<CloseOutlined style={{ color: '#a6a6a6' }} />} onClick={handleClose} />
        </WindowControls>
      </TitleBar>
      <ContentArea>{children}</ContentArea>
    </FrameContainer>
  );
}; 